multi touch対応の描画アプリのdemo
お試し方法
code:sh
code:start.sh
codeを整形してみた
indentの修正
Javascriptを別ファイルに書き出す
pathを書き換える
CSSはファイルが存在しなかったので消した
ページが読み込まれたら自動的に初期化処理を行う
code:index.html
<!doctype html>
<html>
<!--
This application is documented in "Using Pointer Events":
The application is a port of the example in "Using Touch events":
This port uses Pointer Events instead of Touch Events.
-->
<head>
</head>
<body>
code:index.html
<canvas id="canvas" width="600" height="300" style="border:solid black 1px; touch-action:none">
Your browser does not support canvas element.
</canvas>
code:index.html
<br>
Log:
<script async="" src="./index.js" crossorigin="use-credentials"></script>
</body>
</html>
script
ESNEXTに書き換えた
早期returnにした
code:index.js
addEventListener('load', startup);
function startup() {
const el = document.getElementsByTagName("canvas")0; el.addEventListener("pointerdown", handleStart, false);
el.addEventListener("pointerup", handleEnd, false);
el.addEventListener("pointercancel", handleCancel, false);
el.addEventListener("pointerout", handleOut, false);
el.addEventListener("pointermove", handleMove, false);
log("initialized.");
}
code:index.js
const ongoingTouches = new Array();
function handleStart(evt) {
log("pointerdown.");
const el = document.getElementsByTagName("canvas")0; const ctx = el.getContext("2d");
log(pointerdown: id = ${evt.pointerId});
ongoingTouches.push(copyTouch(evt));
const color = colorForTouch(evt);
ctx.beginPath();
ctx.arc(touchesi.pageX, touchesi.pageY, 4, 0, 2 * Math.PI, false); // a circle at the start ctx.arc(evt.clientX, evt.clientY, 4, 0, 2 * Math.PI, false); // a circle at the start
ctx.fillStyle = color;
ctx.fill();
}
code:index.js
function handleMove(evt) {
const el = document.getElementsByTagName("canvas")0; const ctx = el.getContext("2d");
const color = colorForTouch(evt);
const idx = ongoingTouchIndexById(evt.pointerId);
log(continuing touch: idx = ${idx});
if (idx < 0) {
log(can't figure out which touch to continue: idx = ${idx});
return;
}
ctx.beginPath();
log(ctx.moveTo(${ongoingTouches[idx].pageX}, ${ongoingTouches[idx].pageY}););
ctx.moveTo(ongoingTouchesidx.pageX, ongoingTouchesidx.pageY); log(ctx.lineTo(${evt.clientX}, ${evt.clientY}););
ctx.lineTo(evt.clientX, evt.clientY);
ctx.lineWidth = 4;
ctx.strokeStyle = color;
ctx.stroke();
ongoingTouches.splice(idx, 1, copyTouch(evt)); // swap in the new touch record
log(".");
}
code:index.js
function handleEnd(evt) {
log("pointerup");
const el = document.getElementsByTagName("canvas")0; const ctx = el.getContext("2d");
const color = colorForTouch(evt);
const idx = ongoingTouchIndexById(evt.pointerId);
if (idx < 0) {
log("can't figure out which touch to end");
return;
}
ctx.lineWidth = 4;
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(ongoingTouchesidx.pageX, ongoingTouchesidx.pageY); ctx.lineTo(evt.clientX, evt.clientY);
ctx.fillRect(evt.clientX - 4, evt.clientY - 4, 8, 8); // and a square at the end
ongoingTouches.splice(idx, 1); // remove it; we're done
}
code:index.js
function handleCancel(evt) {
log(pointercancel: id = ${evt.pointerId});
const idx = ongoingTouchIndexById(evt.pointerId);
ongoingTouches.splice(idx, 1); // remove it; we're done
}
描画領域外にでたときにバグる
クリックしても描画が終わらない
2021-06-30 08:51:53 ビンゴ。pointercancelではなくpointeroutを使わないとcancelされたタッチの処理ができない
code:index.js
function handleOut(evt) {
log(pointerout: id = ${evt.pointerId});
const idx = ongoingTouchIndexById(evt.pointerId);
ongoingTouches.splice(idx, 1); // remove it; we're done
}
code:index.js
function colorForTouch(touch) {
let r = touch.pointerId % 16;
let g = Math.floor(touch.pointerId / 3) % 16;
let b = Math.floor(touch.pointerId / 7) % 16;
r = r.toString(16); // make it a hex digit
g = g.toString(16); // make it a hex digit
b = b.toString(16); // make it a hex digit
const color = #${r}${g}${b};
log(color for touch with identifier ${touch.pointerId} = ${color});
return color;
}
function copyTouch(touch) {
return { identifier: touch.pointerId, pageX: touch.clientX, pageY: touch.clientY };
}
function ongoingTouchIndexById(idToFind) {
return ongoingTouches.findIndex(({identifier: id}) => id === idToFind);
}
function log(msg) {
const p = document.getElementById('log');
p.innerHTML = ${msg}\n${p.innerHTML};
}